/* istanbul ignore next */
import Vue from "vue";

const isServer = Vue.prototype.$isServer;
const on = (function () {
    if (!isServer && document.addEventListener) {
        return function (element, event, handler) {
            if (element && event && handler) {
                element.addEventListener(event, handler, false);
            }
        };
    } else {
        return function (element, event, handler) {
            if (element && event && handler) {
                element.attachEvent("on" + event, handler);
            }
        };
    }
})();

/* istanbul ignore next */
const off = (function () {
    if (!isServer && document.removeEventListener) {
        return function (element, event, handler) {
            if (element && event) {
                element.removeEventListener(event, handler, false);
            }
        };
    } else {
        return function (element, event, handler) {
            if (element && event) {
                element.detachEvent("on" + event, handler);
            }
        };
    }
})();
// 没有其他依赖
import {renderThumbStyle, BAR_MAP} from "./util";

/* istanbul ignore next */
export default {
    name: "Bar",

    props: {
        vertical: Boolean,
        size: String,
        move: Number
    },

    computed: {
        bar() {
            return BAR_MAP[this.vertical ? "vertical" : "horizontal"];
        },

        wrap() {
            return this.$parent.wrap;
        }
    },

    render(h) {
        const {size, move, bar} = this;

        return (
            <div class={["el-scrollbar__bar", "is-" + bar.key]} onMousedown={this.clickTrackHandler}>
                <div
                    ref="thumb"
                    class="el-scrollbar__thumb"
                    onMousedown={this.clickThumbHandler}
                    style={renderThumbStyle({size, move, bar})}
                ></div>
            </div>
        );
    },

    methods: {
        clickThumbHandler(e) {
            // prevent click event of right button
            if (e.ctrlKey || e.button === 2) {
                return;
            }
            this.startDrag(e);
            this[this.bar.axis] =
                e.currentTarget[this.bar.offset] -
                (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction]);
        },

        clickTrackHandler(e) {
            const offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]);
            const thumbHalf = this.$refs.thumb[this.bar.offset] / 2;
            const thumbPositionPercentage = ((offset - thumbHalf) * 100) / this.$el[this.bar.offset];

            this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize]) / 100;
        },

        startDrag(e) {
            e.stopImmediatePropagation();
            this.cursorDown = true;

            on(document, "mousemove", this.mouseMoveDocumentHandler);
            on(document, "mouseup", this.mouseUpDocumentHandler);
            document.onselectstart = () => false;
        },

        mouseMoveDocumentHandler(e) {
            if (this.cursorDown === false) return;
            const prevPage = this[this.bar.axis];

            if (!prevPage) return;

            const offset = (this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1;
            const thumbClickPosition = this.$refs.thumb[this.bar.offset] - prevPage;
            const thumbPositionPercentage = ((offset - thumbClickPosition) * 100) / this.$el[this.bar.offset];

            this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize]) / 100;
        },

        mouseUpDocumentHandler(e) {
            this.cursorDown = false;
            this[this.bar.axis] = 0;
            off(document, "mousemove", this.mouseMoveDocumentHandler);
            document.onselectstart = null;
        }
    },

    destroyed() {
        off(document, "mouseup", this.mouseUpDocumentHandler);
    }
};
